<template>
	<div class="disease-detail-page">
		<div class="left-menu">
			<div class="float-box">
				<FloatBrif :menuList="menuList" :anchorCode="anchorCode" @toExpand="toExpand" @toJump="toJump" />
					<!-- <template #menucont>
						<div class="brif-box">
							<p class="brif-item" :class="{'brif-item-on': anchorNum == 1}" @click.stop="toJump(1)">
								<span v-lang="{lang: controlSto.language, lgid: -23}">Basic information</span>
							</p>
							<p class="brif-item" :class="{'brif-item-on': anchorNum == 2}" @click.stop="toJump(2)">
								<span v-lang="{lang: controlSto.language, lgid: -66}">Associated ingredient</span>
							</p>
							<p class="brif-item" :class="{'brif-item-on': anchorNum == 3}" @click.stop="toJump(3)">
								<span v-lang="{lang: controlSto.language, lgid: -65}">Associated herb</span>
							</p>
							<p class="brif-item" :class="{'brif-item-on': anchorNum == 4}" @click.stop="toJump(4)">
								<span v-lang="{lang: controlSto.language, lgid: -67}">Associated prescription</span>
							</p>
							
						</div>
					</template> -->
				<!-- </FloatBrif> -->
			</div>
		</div>
		<div class="disease-cont page-cont-box">
			<BreadCrumb :data="dataObj.crumbList" />
			
			<div class="cont-box" v-if="detailId">
				<!-- Basic information -->
				<div ref="anchor1" class="anchor1">
					<Basic :detailId="detailId" @toCalc="toCalc"/>
				</div>
				<!-- Associated ingredient -->
				<div ref="anchor2" class="anchor2">
					<AssoIngr :detailId="detailId" @toCalc="toCalc"/>
				</div>
				<!-- Associated herb -->
				<div ref="anchor3" class="anchor3">
					<AssoHerb :detailId="detailId" @toCalc="toCalc"/>
				</div>
				<!-- Associated prescription -->
				<div ref="anchor4" class="anchor4">
					<AssoPres :detailId="detailId" @toCalc="toCalc"/>
				</div>
			</div>

		</div>
  </div>
</template>


<script setup>
	import { ref, reactive, computed, onBeforeMount, onMounted, nextTick } from 'vue'
	import BreadCrumb from '@/components/BreadCrumb.vue'
	import Basic from '@/components/disease/DiseaseBasic.vue'
	import AssoIngr from '@/components/disease/AssoIngr.vue'
	import AssoHerb from '@/components/disease/AssoHerb.vue'
	import AssoPres from '@/components/disease/AssoPres.vue'
  import FloatBrif from '@/components/FloatBrif.vue'

	import { debounce } from 'lodash'
	import { useRouter } from 'vue-router'
	import { controlStore } from '@/stores/control'
	import { langTxt } from '@/utils/util'

	let ancDebounce = null;

	let anchor1 = ref(null);
	let anchor2 = ref(null);
	let anchor3 = ref(null);
	let anchor4 = ref(null);
	let anchorCode = ref('');

	let anchorList = reactive([
		{
			anchorName: 'anchor1',
			value: anchor1
		}, {
			anchorName: 'anchor2',
			value: anchor2
		}, {
			anchorName: 'anchor3',
			value: anchor3
		}, {
			anchorName: 'anchor4',
			value: anchor4
		}
	])
	const menuList = reactive([
		{
			menuName: 'Disease information',
			isExpend: false,
			code: 'Disease1',
			anchor: 'anchor1',
			lgid: '-117',
			children: []
		},
		{
			menuName: 'Associated ingredient',
			isExpend: false,
			code: 'DisAssoIngrt1',
			anchor: 'anchor2',
			lgid: '-66',
			children: []
		}, {
			menuName: 'Associated herb',
			isExpend: false,
			code: 'DisAssoHerbt1',
			anchor: 'anchor3',
			children: [],
			lgid: '-65'
		}, {
			menuName: 'Associated prescription',
			isExpend: false,
			code: 'DisAssoPret1',
			anchor: 'anchor4',
			lgid: '-67',
			children: []
		}
	])
	const controlSto = controlStore();
	const router = useRouter();
	const detailId = ref('');
	const dataObj = reactive({
		crumbList: [
			{
				fkey: '-16',
                lable: 'Home',
                name: 'home'
            }, {
				fkey: '-21',
                lable: 'Disease',
                name: 'disesearch'
            }, {
				fkey: '-51',
                lable: 'Details',
                name: ''
            }
        ]
	});


	onBeforeMount(()=> {
		initPage();
	});
	onMounted(()=>{
		toCalc();
	});

	// const getSearchPlace = () => {
	// 	return langTxt(controlSto.language, '-15');
    // };
	const searchPlace = computed(() => {
		return langTxt(controlSto.language, '-15');
	});
	const initPage = () => {
		if(router.currentRoute.value.query && router.currentRoute.value.query.id) {
			detailId.value = router.currentRoute.value.query.id;
		}
    };

	const toCalc = () => {
		nextTick(()=>{
			ancDebounce && ancDebounce();
		});
	};
	const toExpand = (item, i, flag) => {
		menuList.forEach(e => e.isExpend = false)
		item.isExpend = !flag
		menuList[i].isExpend = !flag
  };
	const toJump = (v, t, index, item) => {
		let tdiv;
		for(const o in anchorList) {
			if (anchorList[o].anchorName == v.anchor) {
				tdiv = anchorList[o].value
			}
		}
		if (t == 1) {
			anchorCode.value= v.code;
		} else {
			anchorCode.value= v.code;
		}
		window.scrollTo({top: (tdiv.offsetTop - 60), behavior: 'smooth' });
  };
   
</script>

<style lang="scss" scoped>
	.disease-detail-page {
		height: 100%;
		min-height: calc(100vh - 250px);
		background-size: 100% 100%;
		padding-right: 50px;
		display: flex;
		align-items: top;
		.disease-cont {
			display: inline-block;
			width: calc(100vw - 380px);
    	text-align: left;
			padding-left: 30px;
			.title-box {
				padding-bottom: 32px;
			}
		}
		.left-menu {
			width: 240px;
			.float-box {
				position: fixed;
				top: 75px;
				z-index: 9999;
			}
		}
	}
	
</style>
